<template>
	<view class="page">
		<!-- 顶部切换导航 -->
		<view class="tabnavs">
			<view class="tabnav" @click="tabnav(0)">
				全部
			</view>
			<view class="tabnav" @click="tabnav(1)">
				待审核
			</view>
			<view class="tabnav" @click="tabnav(2)">
				已审核
			</view>
			<view class="tabnav" @click="tabnav(3)">
				已取消
			</view>
			<view class="blue_line" :style="'left:'+position+'rpx'">
				
			</view>
		</view>
		<!-- 主要内容板块 -->
		<view class="main_content">
			<!-- 就诊人切换 -->
			<ChangePatient @sendinfo="getInfo"></ChangePatient>
			<!-- 按钮弹窗 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="warn" cancelText="取消" confirmText="确定" title="提示" content="确定取消申请吗?" @confirm="dialogConfirm"
					@close="dialogClose"></uni-popup-dialog>
			</uni-popup>
			<!-- 状态切换内容 -->
			<view class="status_content">
				<image v-if="blinglists.length==0" style="width: 100%;text-align: center;margin-top: 100rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E5%88%97%E8%A1%A8/u875.png" mode="widthFix"></image>
				<!-- 全部 -->
				<view class="alllist" v-for="(item,index) in blinglists" :key="index" v-if="blinglists.length!=0">
					<view class="list_title">
						<view class="title">
							{{JSON.parse(item.medicine).length==0?(JSON.parse(item.inspect).length==0?JSON.parse(item.test)[0].title:JSON.parse(item.inspect)[0].title):JSON.parse(item.medicine)[0].title}}...
						</view>
						<view class="tag" :style="item.statue=='待审核'?'background-color: rgba(255, 251, 230, 1);color: #FAAD14;':item.statue=='审核通过'?'background-color: rgba(230, 244, 255, 1);color: #1677FF;':item.statue=='审核驳回'?'background-color: rgba(255, 241, 240, 1);color: #F5222D;':item.statue=='已支付'?'background-color: rgba(230, 255, 251, 1);color: #13C2C2;':'background-color: rgba(242, 242, 242, 1);color: #7F7F7F;'">
							{{item.statue}}
						</view>
					</view>
					<!-- 开单信息 -->
					<view class="billingInfo">
						<view class="billinglist">
							<view class="billing_title">
								申请医院
							</view>
							<view class="billing_content">
								四川省保健院北苑
							</view>
						</view>
						<view class="billinglist">
							<view class="billing_title">
								申请时间
							</view>
							<view class="billing_content">
								{{new Date(item.applyTime).getFullYear()+'-'+String(new Date(item.applyTime).getMonth() + 1).padStart(2, '0')+'-'+String(new Date(item.applyTime).getDate()).padStart(2, '0')+' '+String(new Date(item.applyTime).getHours()).padStart(2, '0')+':'+String(new Date(item.applyTime).getMinutes()).padStart(2, '0')+':'+String(new Date(item.applyTime).getSeconds()).padStart(2, '0')}}
							</view>
						</view>
						<view class="billinglist">
							<view class="billing_title">
								开单金额
							</view>
							<view class="billing_content">
								￥{{Number(item.subtotal).toFixed(2)}}
							</view>
						</view>
					</view>
					<!-- 操作 -->
					<view class="operate">
						<button class="withdraw" v-if="item.statue=='待审核'" @click="applyclose(item.record_id)">取消申请</button>
						<button class="gopay" v-if="item.statue=='审核通过'" @click="Gopay(item.record_id)">去支付</button>
						<view class="rejection_reason" v-if="item.statue=='审核驳回'">
							<view class="rejection_title">
								驳回原因
							</view>
							<view class="rejection_content">
								您所开的项目必须与您的历史诊断相符
							</view>
						</view>
						<button class="withdraw" v-if="item.statue=='已支付'" @click="viewdetail(item.record_id,item.patient_id)">查看详情</button>
					</view>
				</view>
				
				<!-- 加载完成 -->
				<view class="Finished_loading" v-if="nav==0 && blinglists.length!=0">
					<view class="line">
						
					</view>
					<view class="text">
						已全部加载
					</view>
					<view class="line">
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import api from '../../src/utils/api.js'
	const blinglists = reactive([])
	const patientid = ref(0)
	onLoad((option)=>{
		patientid.value = option.patientid
		api('/applyselect',{
			patientid:option.patientid
		}).then(res=>{
			blinglists.push(...res.dataes)
		}).catch(err=>{
			console.log(err)
		})
	})
	// 导航状态切换
	const nav = ref(0)
	const tabnav = (index) => {
		nav.value=index
		blinglists.splice(0)
		api('/appselectstatuslist',{
			patientid:patientid.value,
			status:index
		}).then(res=>{
			blinglists.push(...res.data)
		}).catch(err=>{
			console.log(err)
		})
	}
	
	const position = computed(()=>{
		return nav.value*187.5+50.75
	})
	const alertDialog = ref(null)
	// 取消申请
	const record_id = ref(0)
	const dialogConfirm = () => {
		console.log('确定')
		alertDialog.value.close()
		api('/appchangestate',{
			status:'已取消',
			record_id:record_id.value
		},'POST').then(res=>{
			blinglists.splice(0)
			api('/applyselect',{
				patientid:patientid.value
			}).then(res=>{
				blinglists.push(...res.dataes)
			}).catch(err=>{
				console.log(err)
			})
		}).catch(err=>{
			console.log(err)
		})
	}
	// 去支付
	const Gopay = (id) => {
		uni.navigateTo({
			url:'/pages/Bill_payment/Bill_payment?recordid='+id
		})
	}
	// 查看详情
	const viewdetail = (recordid,patientid) => {
		uni.navigateTo({
			url:'/pages/Billing_details/Billing_details?recordid='+recordid+'&patientid='+patientid
		})
	}
	const dialogClose = () => {
		console.log('取消')
		alertDialog.value.close()
	}
	const applyclose = (id) => {
		console.log('取消申请')
		record_id.value = id
		alertDialog.value.open()
	}
	// 就诊人切换
	const memberid = ref(0)		//就诊人切换成员id
	const getInfo = (data) => {
		console.log(data)
		api('/appselectpatientid',{
			memberid:data.member_id?data.member_id:0,
			userid:uni.getStorageSync('userid')
		}).then(res=>{
			blinglists.splice(0)
			patientid.value = res.datas[0].patient_id
			api('/applyselect',{
				patientid:res.datas[0].patient_id
			}).then(res=>{
				blinglists.push(...res.dataes)
			}).catch(err=>{
				console.log(err)
			})
		}).catch(err=>{
			console.log(err)
		})
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: rgba(242, 242, 242, 1);
		min-height: 100vh;
		.tabnavs{
			width: 100%;
			height: 88rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			position: sticky;
			top: 88rpx;
			z-index: 99;
			.tabnav{
				width: 25%;
				text-align: center;
				font-family: 'ArialMT', 'Arial', sans-serif;
				font-size: 28rpx;
				color: #333;
				cursor: pointer;
			}
			.blue_line{
				width: 86rpx;
				height: 8rpx;
				background-color: rgba(24, 144, 255, 1);
				border-radius: 40rpx;
				position: absolute;
				// left: 50.75rpx;
				left: 238.25rpx;
				bottom: 0;
				transition: all .3s;
			}
		}
		// 主要内容板块
		.main_content{
			padding: 36rpx 26rpx;
			// 就诊人切换
			.patient{
				width: 100%;
				height: 88rpx;
				background-color: #fff;
				border-radius: 16rpx;
				padding:  0 40rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.peopleInfo{
					display: flex;
					align-items: center;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 28rpx;
					height: 44rpx;
					.name{
						font-size: 32rpx;
					}
					.patient_card{
						color: #aaa;
						margin-left: 44rpx;
					}
				}
				.operate{
					display: flex;
					align-items: center;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 32rpx;
					color: #000;
					cursor: pointer;
					.qie{
						margin-left: 12rpx;
					}
				}
			}
			// 就诊人切换弹出层
			.popup{
				
				.popup-content {
					// display: flex;
					// flex-direction: column;
					// align-items: center;
					// justify-content: center;
					border-radius: 72rpx 72rpx 0 0;
					padding: 30rpx 45rpx 0;
					box-sizing: border-box;
					height: 804rpx;
					background-color: #fff;
					font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
					position: relative;
					.title{
						font-size: 32rpx;
						font-weight: 700;
						width: 100%;
						text-align: center;
					}
					.close{
						width: 32rpx;
						position: absolute;
						right: 45rpx;
						cursor: pointer;
						top: 38rpx;
					}
					
					.patientlists{
						margin-top: 60rpx;
						.patientlist{
							width: 660rpx;
							height: 92rpx;
							border-radius: 16rpx;
							padding: 0 30rpx;
							box-sizing: border-box;
							display: flex;
							align-items: center;
							background-color: rgba(230, 244, 255, 1);
							font-size: 28rpx;
							font-family: 'Microsoft YaHei UI', sans-serif;
							margin-bottom: 40rpx;
							.patient_card{
								margin-left: 20rpx;
								color: #aaa;
							}
						}
					}
					.addpatient{
						width: 660rpx;
						height: 80rpx;
						line-height: 80rpx;
						font-family: 'Microsoft YaHei UI', sans-serif;
						font-size: 28rpx;
						color: #fff;
						background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E9%97%A8%E8%AF%8A%E6%8C%82%E5%8F%B7/u579.svg');
						background-size: cover;
						position: absolute;
						bottom: 40rpx;
					}
				}
			}
			// 状态内容切换
			.status_content{
				margin-top: 40rpx;
				.alllist{
					width: 100%;
					border-radius: 16rpx;
					background-color: #fff;
					box-sizing: border-box;
					padding-top: 32rpx;
					padding-right: 42rpx;
					padding-bottom: 40rpx;
					margin-bottom: 30rpx;
					.list_title{
						height: 50rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-left: 38rpx;
						box-sizing: border-box;
						font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
						color: #000;
						position: relative;
						.title{
							width: 476rpx;
							line-height: 44rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-weight: 700;
							font-size: 32rpx;
						}
						.tag{
							padding: 9rpx;
							font-family: 'Microsoft YaHei UI', sans-serif;
							font-size: 24rpx;
							border-radius: 4rpx;
						}
					}
					.list_title::before{
						content: '';
						width: 8rpx;
						height: 36rpx;
						background-color: rgba(22, 119, 255, 1);
						border-radius: 16rpx;
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
					}
					// 开单信息
					.billingInfo{
						width: 100%;
						padding-left: 38rpx;
						box-sizing: border-box;
						margin-top: 32rpx;
						.billinglist{
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 40rpx;
							font-family: 'Microsoft YaHei UI', sans-serif;
							font-size: 28rpx;
							color: #000;
							margin-bottom: 16rpx;
							.billing_title{
								color: #7f7f7f;
							}
						}
					}
					// 操作
					.operate{
						width: 100%;
						display: flex;
						justify-content: flex-end;
						// 取消申请
						.withdraw{
							width: 186rpx;
							height: 66rpx;
							line-height: 66rpx;
							margin: 22rpx 0 0 !important;
							background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E5%BC%80%E5%8D%95%E8%AE%B0%E5%BD%95/u2245.svg');
							background-size: cover;
							font-size: 24rpx;
							cursor: pointer;
							
						}
						// 去支付
						.gopay{
							width: 186rpx;
							height: 66rpx;
							line-height: 66rpx;
							margin: 22rpx 0 0 !important;
							font-size: 24rpx;
							background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E5%BC%80%E5%8D%95%E8%AE%B0%E5%BD%95/u2281.svg');
							background-size: cover;
							color: #fff;
							cursor: pointer;
						}
						// 驳回原因
						.rejection_reason{
							width: 620rpx;
							background-color: #f2f2f2;
							padding: 20rpx 30rpx;
							box-sizing: border-box;
							border-radius: 16rpx;
							font-family: 'Microsoft YaHei UI', sans-serif;
							font-size: 26rpx;
							color: #7f7f7f;
							margin-top: 20rpx;
							.rejection_title{
								color: #F5222D;
								margin-bottom: 14rpx;
							}
						}
					}
				}
				// 加载完成
				.Finished_loading{
					width: 100%;
					height: 120rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.line{
						width: 250rpx;
						height: 2rpx;
						background-color: #d7d7d7;
					}
					.text{
						font-family: 'Microsoft YaHei UI', sans-serif;
						font-size: 24rpx;
						color: #AAAAAA;
					}
				}
			}
		}
	}       
</style>
